<!-- 横向导航栏-初版 -->
<template>
  <nav class="route-navbar">
    <div class="navbar-container">
      <!-- Logo区域 -->
      <div class="navbar-brand">
        <router-link to="/" class="brand-link">
          <logo />
        </router-link>
      </div>

      <!-- 桌面端导航菜单 -->
      <div class="navbar-menu desktop-menu ml-[80px]">
        <ul class="menu-list">
          <li v-for="item in navItems" :key="item.path" class="menu-item">
            <router-link
              :to="item.path"
              class="menu-link"
              :class="{ active: isActiveRoute(item.path) }">
              <div v-if="item.solt == 'Contest'" class="flex items-center gap-1 relative">
                <img src="@/assets/home/trophy-dynamic-color.png" class="w-[24px]" alt="" />
                <span>{{ item.name }}</span>
                <img
                  src="@/assets/home/new_icon.png"
                  class="w-[20px] absolute top-[-5px] right-[-20px]"
                  alt="" />
              </div>
              <span v-else>{{ item.name }}</span>
            </router-link>
          </li>
        </ul>
      </div>

      <!-- 右侧操作区域 -->
      <div class="navbar-actions ml-auto">
        <!-- 桌面端按钮组 -->
        <div class="desktop-actions">
          <img src="@/assets/home/login_btn.png" class="h-[40px]" alt="" />
          <button class="get-started-btn" @click="handleGetStarted">Get Started</button>
        </div>

        <!-- 移动端菜单按钮 -->
        <button
          @click="toggleMobileMenu"
          class="mobile-menu-toggle"
          :class="{ active: isMobileMenuOpen }">
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="mobile-menu" :class="{ open: isMobileMenuOpen }">
      <div class="mobile-menu-content">
        <ul class="mobile-menu-list">
          <li v-for="item in navItems" :key="item.path" class="mobile-menu-item">
            <router-link
              :to="item.path"
              class="mobile-menu-link"
              :class="{ active: isActiveRoute(item.path) }"
              @click="closeMobileMenu">
              <span>{{ item.name }}</span>
            </router-link>
          </li>
        </ul>

        <!-- 移动端按钮组 -->
        <div class="mobile-actions">
          <button class="mobile-login-btn" @click="handleLogin">Log in</button>
          <button class="mobile-get-started-btn" @click="handleGetStarted">Get started</button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, onUnmounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import Logo from '@/components/icons/logo.vue';

  // 响应式数据
  const route = useRoute();
  const router = useRouter();
  const isMobileMenuOpen = ref(false);

  // 导航菜单项
  const navItems = ref([
    {
      name: 'Nex Group',
      path: '/',
    },
    {
      name: 'Nex Designer',
      path: '/store',
    },
    {
      name: 'Nex Product',
      path: '/about',
    },
    {
      name: 'Contest',
      path: '/about',
      solt: 'Contest',
    },
  ]);

  // 计算属性
  const isActiveRoute = (path: string) => {
    return route.path === path;
  };

  // 方法
  const toggleMobileMenu = () => {
    isMobileMenuOpen.value = !isMobileMenuOpen.value;
  };

  const closeMobileMenu = () => {
    isMobileMenuOpen.value = false;
  };

  // 处理登录按钮点击
  const handleLogin = () => {
    console.log('登录按钮被点击');
    // 这里可以添加登录逻辑
    // 例如：跳转到登录页面或打开登录弹窗
  };

  // 处理Get Started按钮点击
  const handleGetStarted = () => {
    console.log('Get Started按钮被点击');
    // 这里可以添加注册或开始使用逻辑
    // 例如：跳转到注册页面或开始使用流程
  };

  // 生命周期
  onMounted(() => {
    // 监听路由变化，关闭移动端菜单
    router.afterEach(() => {
      closeMobileMenu();
    });
  });

  // 监听窗口大小变化
  const handleResize = () => {
    if (window.innerWidth >= 768) {
      closeMobileMenu();
    }
  };

  onMounted(() => {
    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });
</script>

<style lang="scss" scoped>
  @use 'sass:color';
  @use '@/styles/variables' as *;
  @use '@/styles/mixins' as *;

  .route-navbar {
    @include card-style($secondary-bg-color, 0);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    background: rgba($secondary-bg-color, 0.95);
  }

  .navbar-container {
    padding: 0 40px;
    display: flex;
    align-items: center;
    height: 72px;
  }

  .navbar-brand {
    .brand-link {
      @include flex-center();
      gap: $spacing-sm;
      text-decoration: none;
      color: $primary-text-color;
      font-weight: 600;
      font-size: $font-size-lg;
    }

    .brand-icon {
      width: 32px;
      height: 32px;
      color: $primary-color;
    }

    .brand-text {
      @include responsive-hide(xs);
      @include responsive-show(sm);
    }
  }

  .navbar-menu {
    display: none;

    @include respond-to(md) {
      display: block;
    }
  }

  .menu-list {
    @include flex-center();
    gap: $spacing-sm;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .menu-item {
    .menu-link {
      @include flex-center();
      gap: $spacing-xs;
      padding: $spacing-sm $spacing-md;
      border-radius: 0.5rem;
      text-decoration: none;
      color: $secondary-text-color;
      font-weight: 500;
      transition: all 0.3s ease;
      & span {
        color: #222;

        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
      }

      &:hover {
        // color: $primary-text-color;
        // background-color: rgba($primary-color, 0.1);
      }

      &.active {
        // color: $primary-color;
        // background-color: rgba($primary-color, 0.1);
      }
    }

    .menu-icon {
      width: 16px;
      height: 16px;
    }
  }

  .navbar-actions {
    @include flex-center();
    gap: $spacing-sm;
  }

  // 桌面端按钮组
  .desktop-actions {
    @include flex-center();
    gap: 16px;
    display: flex !important;

    @include responsive-hide(md);
    @include responsive-show(lg);
  }

  // Get Started按钮
  .get-started-btn {
    color: #222;
    font-size: $font-size-sm;
    font-weight: 600;
  }

  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;

    @include respond-to(md) {
      display: none;
    }

    .hamburger-line {
      width: 100%;
      height: 3px;
      background-color: $primary-text-color;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    &.active {
      .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
      }

      .hamburger-line:nth-child(2) {
        opacity: 0;
      }

      .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
      }
    }
  }

  .mobile-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: $secondary-bg-color;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    @include respond-to(md) {
      display: none;
    }

    &.open {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }
  }

  .mobile-menu-content {
    padding: $spacing-lg;
  }

  .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-menu-item {
    margin-bottom: $spacing-sm;

    .mobile-menu-link {
      @include flex-center();
      gap: $spacing-sm;
      padding: $spacing-md;
      border-radius: 0.5rem;
      text-decoration: none;
      color: $secondary-text-color;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        color: $primary-text-color;
        background-color: rgba($primary-color, 0.1);
      }

      &.active {
        color: $primary-color;
        background-color: rgba($primary-color, 0.1);
      }
    }

    .mobile-menu-icon {
      width: 20px;
      height: 20px;
    }
  }

  // 移动端按钮组
  .mobile-actions {
    @include flex-center();
    gap: $spacing-sm;
    margin-top: $spacing-lg;
    padding-top: $spacing-lg;
    border-top: 1px solid rgba($primary-text-color, 0.1);
  }

  // 移动端登录按钮
  .mobile-login-btn {
    @include button-style(transparent, $primary-text-color);
    padding: $spacing-sm $spacing-lg;
    font-size: $font-size-sm;
    font-weight: 500;
    border-radius: 40px;
    border: 1px solid #7a7a7a;
    flex: 1;
    transition: all 0.3s ease;

    &:hover {
      background-color: rgba($primary-text-color, 0.05);
      border-color: rgba($primary-text-color, 0.3);
      transform: none;
    }
  }

  // 移动端Get Started按钮
  .mobile-get-started-btn {
    @include button-style($primary-color, white);
    padding: $spacing-sm $spacing-lg;
    font-size: $font-size-sm;
    font-weight: 600;
    border-radius: 6px;
    flex: 1;
    box-shadow: 0 2px 4px rgba($primary-color, 0.2);

    &:hover {
      box-shadow: 0 4px 8px rgba($primary-color, 0.3);
      transform: translateY(-1px);
    }
  }
</style>
